<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>       
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@include file= "/WEB-INF/pages/base/commImportPage.jsp" %>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>用户管理</title>
	<!--[if lt IE 9]><script src="${resourcePath}/js/comm/css3-mediaqueries.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="${resourcePath}/tags/bootstrap/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/new/comm/base_v3.0.css">
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/new/pipedata.css">
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/comm/paging.css">
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/settings.css">
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/new/comm/Package.css">
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/new/pig.css">
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/insp.css">
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/comm/NewBtn.css">
    <style type="text/css">


        /*.btn.btn-copy-icon{cursor:pointer}*/
        /*.btn.btn-copy-icon:hover{background-color:#ffae00;border-color:#ffae00}*/
        /*.btn.btn-copy-icon:active{background-color:#ffae00;border-color:#ffae00  }*/
    </style>
</head>
<body class="body-pad" style="padding-bottom:100px">
	<input type="hidden" id="pagePath" value="${pageContext.request.contextPath}"/>
	<input type="hidden" id="resourcePath" value="${resourcePath}"/>
	
	<input type="hidden" id="userId" value=""/>
	<input type="hidden" id="authorizeUser" value="">
<div class="html-header" style="background-color:white">
    <p class="header-title"><em class="seting-yhgl" style="margin-left:20px"></em>用户管理</p>
</div>
<div class="container-fluid warp insp-container">
    <div class="row-fluid  bg-white1">
        <div class="main clearFix">
           <div class="cxtj clearFix">
               <div class="fxgl">
                   <p class="fxgl-title">用户名称</p>
                   <div class="sel w320">
                       <input type="text" placeholder=""  class="new-input" id="JQ_username"/>
                   </div>
               </div>
               <div class="fxgl">
                   <p class="fxgl-title">请选择公司</p>
                   <div class="sel w320">
                       <div class="dropdown-list">
                           <div class="drop-list drop-list-min" >
                               <div class="checked" id="SCompDiv">
                                   <a href="javascript:void(0);" id="gs">请选择公司</a>
                               </div>
                               <span class="down-span" ></span>
                           </div>
                           <ul class="select select-min none" >
                               <c:forEach items="${companyList }" var="cl">
                                   <li onclick="getDepartment(this);"><a href="javascript:void(0);" id="${cl.id }">${cl.name }</a></li>
                               </c:forEach>
                           </ul>
                       </div>
               </div>
           </div>
               <div class="fxgl br">
                   <p class="fxgl-title">请选择部门</p>
                   <div class="sel w320">
                       <div class="dropdown-list" >
                           <div class="drop-list drop-list-min" >
                               <div class="checked"  id="SDeptDiv">
                                   <a href="javascript:void(0);" id="bm">请选择部门</a>
                               </div>
                               <span class="down-span" ></span>
                           </div>
                           <ul class="select select-min none" >

                           </ul>
                       </div>
                   </div>
               </div>
               <div class="fxgl ">
                   <p class="fxgl-title">授权</p>
                   <div class="sel w320">
                       <div class="dropdown-list" >
                           <div class="drop-list drop-list-min" >
                               <div class="checked" id="authorDiv">
                                   <a href="javascript:void(0);" id="0">未授权</a>
                               </div>
                               <span class="down-span" ></span>
                           </div>
                           <ul class="select select-min none" >
                               <li><a href="javascript:void(0);" id="0">未授权</a></li>
                               <li><a href="javascript:void(0);" id="1">已授权</a></li>
                           </ul>
                       </div>
                   </div>
               </div>
               <div class="fxgl ">
                   <p class="fxgl-title" style="color:white;margin-bottom:10px">&nbsp;</p>
                   <a href="javascript:void(0)" class="zy-button zy-search" type="button" onclick="searchUser(this);" style="padding:10px 35px 11px 35px;"><i class="zy-search-icon"></i>查询</a>
               </div>

               <div style="clear:both"></div>
               <p class="tool pad20">
                   <a href="javascript:void(0);" class="btn btn-w100 btn-add-icon btn-h30" onclick="showDialog('add');"><em></em>新建</a>
                   <a  href="javascript:void(0);"  class="btn btn-w100 btn-copy-icon btn-h30" onclick="deleteData('multiple');"><em></em>删除</a>
                   <!-- <a  href="javascript:void(0);"  class="btn btn-w100 btn-in-bg  btn-h30" onclick ="importData();"><em></em>导入</a>  -->
                   <a  href="javascript:void(0);"  class="btn btn-w100 btn-export-bg btn-h30"  onclick="exportData(this);"><em></em>导出</a>
                   <a href="javascript:void(0);" class="btn btn-w100 btn-stop-bg btn-h30" onclick="dataOnOrOff('off');"><em></em>停用</a>
                   <a href="javascript:void(0);" class="btn btn-w100 btn-qy-bg btn-h30" onclick="dataOnOrOff('on');"><em></em>启用</a>
                   <a href="javascript:void(0);" class="btn btn-w100 btn-reset-bg btn-h30" onclick="resetPwd(this);" style="text-indent:19px;width:82px !important;"><em style="left:10px"></em>重置密码</a>
                   <a href="javascript:void(0);" class="btn btn-w100 btn-reset-bg btn-h30" onclick="userAuthorize('mutiple');" style="text-indent:19px;width:82px !important;"><em style="left:10px"></em>批量授权</a>
               </p>
               <div style="clear:both"></div>
               <div class="l-r clearFix pad20">
                   <div class="left">
                       <div class="info-header clearFix">
                           <ul class="ul-header" style="border-bottom:1px solid #d7dde9">
                               <li class="sw5-1" style="width:5%">
                                <span class="table-ck">
                                    <span name="checkAll" class="check-box selected " onclick=""><i></i></span>
                                </span>
                               </li>
                               <li class="w15-2" style="width:10%">用户名称</li>
                               <li class="sw10-6-1" style="width:10%">姓名</li>
                               <li class="sw10-4" style="width:5%">性别</li>
                               <li class="sw10" style="width:10%">邮箱</li>
                               <li class="sw10-1" style="width:10%">手机号码</li>
                               <li class="sw10-5-1" style="width:10%">岗位</li>
                               <li class="sw10-5-2" style="width:10%">部门</li>
                               <li class="sw10-5-3" style="width:10%">公司</li>
                               <li class="sw10-5-4" style="width:5%">状态</li>
                               <li class="s15-last no-right" style="width:15%">编辑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 授权</li>
                           </ul>
                           <div class="div-scrol" id="searchBody">
                               <c:if test="${empty requestScope.main}">
                                   <div class="no-data ">
                                       <img src="${resourcePath}/images/pig/no-data.png" alt=""/>
                                   </div>
                               </c:if>
                               <c:if test="${not empty requestScope.main}">
                                   <c:forEach var="ps" items="${requestScope.main}" varStatus="status">
                                       <div class="info-tr" style="border-bottom:1px solid #d7dde9">
                                           <ul class="<c:if test="${status.index%2 eq 0}">ul-header bg-white</c:if> <c:if test="${status.index%2 ne 0}">ul-header bg-second</c:if>">
                                               <li class="w5" style="width:5%">
		                                        <span class="table-ck">
		                                             <span name="checkSingle" class="check-box selected " onclick="" id="${ps.id }"><i></i></span>
		                                        </span>
                                               </li>
                                               <li class="w15-2" style="width:10%">${(not empty ps.username && "" ne fn:trim(ps.username)) ? ps.username: '-'}</li>
                                               <li class="sw10-6" style="width:10%">${(not empty ps.realName && "" ne fn:trim(ps.realName)) ? ps.realName: '-'}</li>
                                               <li class="w10" style="width:5%">${(not empty ps.sex && "" ne fn:trim(ps.sex)) ? ps.sex: '-'}</li>
                                               <li class="w10" style="width:10%">${(not empty ps.email && "" ne fn:trim(ps.email)) ? ps.email: '-'}</li>
                                               <li class="w10" style="width:10%">${(not empty ps.mobile && "" ne fn:trim(ps.mobile)) ? ps.mobile: '-'}</li>
                                               <li class="w10" style="width:10%">${(not empty ps.position && "" ne fn:trim(ps.position)) ? ps.position: '-'}</li>
                                               <li class="w10" style="width:10%">${(not empty ps.department && "" ne fn:trim(ps.department)) ? ps.department: '-'}</li>
                                               <li class="w10" style="width:10%">${(not empty ps.company && "" ne fn:trim(ps.company)) ? ps.company: '-'}</li>
                                               <li class="w10" style="width:5%"><em onclick='changeState(this);' class="<c:if test="${ps.state == 'LOCKED'}">on-off</c:if> <c:if test="${ps.state == 'ACTIVATE'}">on-off active</c:if>"></em></li>
                                               <li class="s15-last no-right" style="width:15%;position:relative">
                                                   <a href="javascript:void(0);" class="edit0" onclick="showDialog(this);" style='position:absolute;left:50%;margin-left:-67px;top:50%;margin-top:-13px' >
                                                       <!-- 公司ID -->
                                                       <input type="hidden" value="${ps.companyId }"/>
                                                       <!-- 部门ID -->
                                                       <input type="hidden" value="${ps.departmentId }"/>
                                                       <!-- 职位ID -->
                                                       <input type="hidden" value="${ps.positionId }"/>
                                                       <!-- 状态值 -->
                                                       <input type="hidden" value="${ps.state }"/>
                                                       <!-- 工号 -->
                                                       <input type="hidden" value="${ps.empno }"/>
                                                       <!-- 备注 -->
                                                       <input type="hidden" value="${ps.remark }"/>
                                                   </a>
                                                   <a href="javascript:void(0);"  class="delet1" onclick="deleteData(this);" style='position:absolute;left:50%;margin-left:-14px;top:50%;margin-top:-15px'></a>
                                                   <a href="javascript:void(0);"  class="shouquan" onclick="userAuthorize(this);" style='position:absolute;left:50%;margin-left:39px;top:50%;margin-top:-14px'></a>
                                               </li>
                                           </ul>
                                       </div>
                                   </c:forEach>
                               </c:if>
                           </div>
                       </div>
                   </div>
               </div>
           </div>

            <div class="se-bt clearFix">




                <%--<a href="javascript:void(0);" class="btn btn-w100 btn-search-icon btn-h30" style="float:left;margin-left:10px" onclick="searchUser(this);"><em></em>查询</a>--%>
            </div>


        </div>
    </div>
</div>
<!--新增修改弹出层-->
<div id="add" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width:1000px;margin-left:-500px;left:50%;height: 520px;margin-top:-260px;top:50%">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h3 class="PopupTitle" style="text-align:center">新建用户信息</h3>
    </div>
    <div class="modal-body copy-tan">
        <ul class="ul-title">
            <li><span style="color: red">*&nbsp;</span>用户名称 </li>
            <li><span style="color: red">*&nbsp;</span>手机号码</li>
            <li style="margin-right:0"><span style="color: red">*&nbsp;</span>邮箱</li>
        </ul>
        <ul class="u-info">
            <li class="li1" style="border-bottom:none">
                <div class="sel w410" style="width:100%;margin-top:5px">
                    <input type="text" placeholder="用户名称"  id="username" style="width:100%;">
                </div>
            </li>
            <li class="li1" style="border-bottom:none">
                <div class="sel w410" style="width:100%;margin-top:5px">
                    <input type="text" placeholder="手机号码"  id="moblie" style="width:100%;">
                </div>
            </li>
            <li class="li1" style="border-bottom:none;margin-right:0">
                <div class="sel w410" style="width:100%;margin-top:5px">
                    <input type="text" placeholder="邮箱"  id="email" style="width:100%;">
                </div>
            </li>
        </ul>
        <ul class="ul-title">
            <li><span style="color: red">*&nbsp;</span>姓名</li>
            <li><span style="color: red">*&nbsp;</span>性别</li>
            <li style="margin-right:0"><span style="color: red">*&nbsp;</span>工号</li>
        </ul>
        <ul class="u-info">
            <li class="li1" style="border-bottom:none">
                <div class="sel w410" style="width:100%;margin-top:5px">
                    <input type="text" maxlength="8"  placeholder="姓名" id="realName"  style="width:100%">
                </div>
            </li>
            <li class="li1" style="border-bottom:none">
                <div class="sel w410 clearFix" style="width:100%;margin-top:5px">
                    <div class="dropdown-list" >
                        <div class="drop-list drop-list-min" >
                            <div class="checked"  id="sexDiv">
                                <a href="javascript:void(0);" >请选择性别</a>
                            </div>
                            <span class="down-span"></span>
                        </div>
                        <ul class="select select-min none" style="width:100%;x">
                            <li><a href="javascript:void(0);">男</a></li>
                            <li><a href="javascript:void(0);" id="s">女</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="li1" style="border-bottom:none;margin-right:0">
                <div class="sel w410" style="width:100%;margin-top:5px">
                    <input type="text" placeholder="工号" style="width:100%;" id="code">
                </div>
            </li>
        </ul>
        <ul class="ul-title">
            <li><span style="color: red">*&nbsp;</span>公司</li>
            <li><span style="color: red">*&nbsp;</span>部门</li>
            <li style="margin-right:0"><span style="color: red">*&nbsp;</span>岗位</li>
        </ul>
        <ul class="u-info">
            <li class="li1" style="border-bottom:none">
                <div class="sel w410 clearFix" style="width:100%;margin-top:5px">
                    <div class="dropdown-list" >
                        <div class="drop-list drop-list-min" >
                            <div class="checked"  id="companyDiv">
                                <a href="javascript:void(0);" id="company">请选择公司</a>
                            </div>
                            <span class="down-span"></span>
                        </div>
                        <ul class="select select-min none" style="width:100%;">
                           <!--  <li><a href="javascript:void(0);">男</a></li>
                            <li><a href="javascript:void(0);" id="s">女</a></li> -->
                        </ul>
                    </div>
                    <input type="hidden" id="companySelect"/>
                </div>
            </li>
            <li class="li1" style="border-bottom:none">
                <div class="sel w410 clearFix" style="margin-top:5px;width:100%;">
                    <div class="dropdown-list" >
                        <div class="drop-list drop-list-min" >
                            <div class="checked"  id="departmentDiv">
                                <a href="javascript:void(0);" id="department">请选择部门</a>
                            </div>
                            <span class="down-span"></span>
                        </div>
                        <ul class="select select-min none" style="width:100%;">
                            <!-- <li><a href="javascript:void(0);">男</a></li>
                            <li><a href="javascript:void(0);" id="s">女</a></li> -->
                        </ul>
                    </div>
                    <input type="hidden" id="departmentSelect"/>
                </div>
            </li>
            <li class="li1" style="border-bottom:none;margin-right:0">
                <div class="sel w410 clearFix" style="margin-top:5px;width:100%;">
                    <div class="dropdown-list" >
                        <div class="drop-list drop-list-min" >
                            <div class="checked"  id="positionDiv">
                                <a href="javascript:void(0);" id="position">请选择岗位</a>
                            </div>
                            <span class="down-span"></span>
                        </div>
                        <ul class="select select-min none" style="width:100%;">
                            <!-- <li><a href="javascript:void(0);">男</a></li>
                            <li><a href="javascript:void(0);" id="s">女</a></li> -->
                        </ul>
                    </div>
                    <input type="hidden" id="positionSelect"/>
                </div>
            </li>
        </ul>
        <div style="clear:both"></div>
        <div class="zhuangtai">
            <div class="open-off">
                <span>状态</span>
                <em class="on-off" onclick="changeS(this);"></em>
                <input type="hidden" value=""/>
            </div>
            <div class="qg-text">
                <textarea rows="" cols="" placeholder="备注" id="remark" style="height:70px"></textarea>
            </div>
        </div>
    </div>
    <div class="modal-footer" style="text-align:center;margin-top:20px">
        <button class="btn btn-w140 btn-save-icon btn-h40" id="ddd" onclick="save();"><em style="top:10px;left:35px"></em>确定</button>
    </div>
</div>
<!--授权-->
<div id="sh" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h3 class="PopupTitle" style="text-align:center">用户和用户组授权</h3>
    </div>
    <div class="modal-body copy-tan">
        <ul class="ul-title">
            <li>用户名称</li>
        </ul>
        <div style="clear:both"></div>
        <ul class="u-info">
            <li class="li1" style="height:auto;width:90%">
                <span class="s1">中石油清管一分队</span>
            </li>
        </ul>
        <div style="clear:both"></div>
        <div class="left-right">
            <span class="choice">选择用户组</span>
            <div class="main-l">
                <div class="left-ch">
                   <p class="p-top"><em></em><span>未选择用户组</span></p>
                    <ul>
                        <!-- <li><span>阴保工程师</span></li>
                        <li><span>系统管理员</span></li>
                        <li><span>超级管理员</span></li>
                        <li><span>超级管理员</span></li>
                        <li><span>超级管理员</span></li>
                        <li><span>超级管理员</span></li>
                        <li><span>普通用户</span></li>
                        <li><span>角色5</span></li> -->
                    </ul>
                </div>
                <div class="middle-ch">
                  <p class="p-fi"><img class="left-icon" src="${resourcePath}/images/setting/right.png" alt=""/></p>
                  <p><img class="right-icon"src="${resourcePath}/images/setting/left.png" alt=""/></p>
                </div>
                <div class="right-ch">
                   <p class="p-top"><em></em><span>已选择用户组</span></p>
                    <ul>
                        <!-- <li><span>角色5</span></li>
                        <li><span>角色5</span></li> -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer" style="text-align:center">
        <button class="btn btn-w140 btn-save-icon btn-h40" id="ddd" onclick="saveAuthorize();"><em style="top:10px;left:35px"></em>确定</button>
    </div>·
<form id="exportForm" action="${pageContext.request.contextPath}/settings/user/exportData.html" style="display: none;" method="post">
    <input type="text" name="username" />
    <input type="text" name="company" />
    <input type="text" name="department" />
    <input type="text" name="isAuthorize" />
    <input type="text" name="fileName" />
</form>
</div>

<!--导入跟踪记录-->
<div id="dr" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width:800px;height:500px;margin-left:-400px;top:15%">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h3 class="PopupTitle" style="text-align:center">导入用户数据</h3>
    </div>
    <div class="modal-body">
         <div>
            <div class="dr-succc">
                <div class="first" id=""><img src="${resourcePath}/images/pig/excel.png" alt="" /></div>
                <div class="second">用户数据</div>
                <div class="third"><img src="${resourcePath}/images/pig/wjj.png" alt=""/><span>0KB</span></div>
                <div class="jdt">
                    <span class="go"></span>
                    <span class="value">100%</span>
                </div> 
                <em class="cl"></em>
            </div>
            <div class="dr-list">
                <ul>
                    <!-- <li><em class="no"></em><span>数据导入失败！共<i>0</i>处错误，点击 <a href="">查看详情</a>,下载 <a href="">错误表格</a></span></li> -->
                    <li><em class="no"></em><span>请点击EXCEL图标导入文件</span></li>
                    
                </ul>
                <div class="no-info">
                   
                </div>

            </div> 
        </div> 
    </div>
</div>
<script src='${resourcePath}/tags/laydate/laydate.js' type='text/javascript'></script>
<script src="${resourcePath}/js/comm/build.js"></script>
<%--<script src="${resourcePath}/tags/bootstrap/bootstrap.min.js"></script>--%>
<%--<script src="${resourcePath}/tags/laydate/laydate.js"></script>--%>
<!--<script src="${resourcePath}/tags/dateTag.js"></script>-->
<script src="${resourcePath}/js/comm/base_v3.0.js"></script>
<script src='${pageContext.request.contextPath}/js/user/userManager.js' type='text/javascript'></script>
<script src="${resourcePath}/tags/uploadjs/upload.js" type="text/javascript" ></script>
<script src="${resourcePath}/tags/uploadjs/jquery.form.js" type="text/javascript"></script>
<script src="${resourcePath}/tags/uploadjs/layer/layer.min.js"></script>
<%--<script src="${pageContext.request.contextPath}/static/js/ui/ui-main.js"></script>--%>
<!-- base -->
<%--<script src="${pageContext.request.contextPath}/static/js/controller/base/base.controller.js"></script>--%>
<script type="text/javascript">
    function changeS(obj){
    	if($(obj).hasClass('active')){
    		$(obj).removeClass('active');
    		$(obj).next().val("LOCKED");
    	}else{
    		$(obj).addClass("active");
    		$(obj).next().val("ACTIVATE");
    	}
    }
</script>
</body>
</html>